<template>
    <div class="app-container">
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="ID" width="95">
                <template slot-scope="scope">
                    {{ scope.$index }}
                </template>
            </el-table-column>
            <el-table-column label="标题">
                <template slot-scope="scope">
                    {{ scope.row.username }}
                </template>
            </el-table-column>
            <el-table-column label="权限" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.role }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="reserve_1" label="reserve_1">
                <template slot-scope="scope">
                    <i class="el-icon-time" />
                    <span>{{ scope.row.reserve_1 }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="reserve_2" label="reserve_2">
                <template slot-scope="scope">
                    <i class="el-icon-time" />
                    <span>{{ scope.row.reserve_2 }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <!-- <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button> -->
                    <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getList } from '@/api/table'
import axios from 'axios'

export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'gray',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },
    data() {
        return {
            list: null,
            listLoading: true
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.listLoading = true
            axios.post('http://localhost:8000/users/get_one', {}).then(response => {
                if (response.data.code === 200) {
                    this.list = response.data.data
                    console.log(this.list)
                    this.listLoading = false
                }
                console.log(response.data)
            })
        },
        handleDelete(index, item) {
            axios.post('http://localhost:8000/users/delete_one', item).then(response => {
                let resp = response.data
                if (resp.code === 200) {
                    this.fetchData()
                    this.$notify({
                        title: 'Success',
                        message: 'Delete Successfully',
                        type: 'success',
                        duration: 2000
                    })
                }
            })
        }
    }
}
</script>
